<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Weex Preview</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="format-detection" content="telephone=no, email=no">
  <link rel="stylesheet" href="./assets/preview.css">
  <script src="./assets/qrcode.js"></script>
</head>
<body>
  <!-- <header class="header center">
    <h1 class="page-title">Weex Preview</h1>
  </header> -->
  <div class="content center">
    <main class="main">
      <div class="mock-phone">
        <div class="camera"></div>
        <div class="earpiece"></div>
        <div class="inner">
          <a class="web-page-link" href="" target="_blank" title="Open on new tab">
            <svg t="1526896599773" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2499" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M466 146c41.6 0 82.1 7.9 120.4 23.4 39.7 16.1 75.3 39.7 105.8 70.3 58.2 58.3 91.5 135.7 93.6 218 2.1 82-26.8 160.7-81.4 221.6l-11.9 13.3-13.3 11.9C620.7 757 544.9 786 465.9 786c-41.6 0-82.1-7.9-120.4-23.4-39.7-16.1-75.3-39.7-105.8-70.3-30.6-30.6-54.2-66.2-70.3-105.8-15.6-38.4-23.4-79-23.4-120.5 0-41.6 7.9-82.1 23.4-120.4 16.1-39.7 39.7-75.3 70.3-105.8 30.6-30.6 66.2-54.2 105.8-70.3C383.9 153.8 424.4 146 466 146m0-40c-92.1 0-184.3 35.1-254.6 105.4-140.6 140.6-140.6 368.5 0 509.1C281.7 790.8 373.8 826 465.9 826c85.9 0 171.8-30.6 240-91.7L889.8 918l28.3-28.3L734.3 706C861 564.7 856.4 347.3 720.5 211.4 650.2 141.1 558.1 106 466 106z" fill="" p-id="2500"></path></svg>
          </a>
          <iframe id="preview" src="/" frameborder="0"></iframe>
        </div>
        <div class="home-btn"></div>
      </div>
      <div class="qrcode-box">
        <a class="qrcode" id="qrcode" target="_blank"></a>
        <p class="qrcode-tips">Use <a target="_blank" href="https://weex-project.io/playground.html">Weex playground app</a> to scan it.</p>
        <div class="pages-box">

        </div>
      </div>
    </main>
  </div>
  <script>
    (function(){
      const page = getUrlParam('page');
      const wsport = getUrlParam('wsport');
      const entrys = getUrlParam('entrys');
      function getUrlParam (key) {
        var reg = new RegExp('[?|&]' + key + '=([^&]+)')
        var match = location.search.match(reg)
        return match && match[1]
      }
      function createQRCode (url, wsport) {
        var $QR = document.querySelector('#qrcode')
        var QR = qrcode(0, 'L')
        url += `${wsport ? `?wsport=${wsport}&`: '?'}_wx_tpl=${url}`
        $QR.setAttribute('href', url)
        QR.addData(url)
        QR.make()
        $QR.innerHTML = QR.createImgTag(6, 12)
      }
      if (page) {
        var $preview = document.querySelector('#preview')
        var $webPageLink = document.querySelector('.web-page-link')
        $preview.src = `/${page.replace('.js', '.html')}`;
        $webPageLink.setAttribute('href', `/${page.replace('.js', '.html')}`);
      }
      if (entrys) {
        var pageEntrys = decodeURI(entrys).replace('\\', '/').split('|');
        var $pages = document.querySelector('.pages-box');
        var contents = '';
        pageEntrys.forEach(function(entry){
          if (entry === getUrlParam('page').replace('.js', '')) {
            contents += `<a href="?page=${entry}.js&entrys=${entrys}" class="page-item active">${entry}</a>`
          }
          else {
            contents += `<a href="?page=${entry}.js&entrys=${entrys}" class="page-item">${entry}</a>`
          }
        })
        $pages.innerHTML = contents;
      }
      var host = window.location.host;
      createQRCode(`http://${host}/dist/${page || 'bar.vue.js'}`, wsport)
    })();
  </script>
</body>
<!-- Webpack Dev Server reload -->
<script src="/webpack-dev-server.js"></script>
</html>
